<template>
  <a-card :bordered="false" :loading="loading">
    <div class="w-full">
      <a-form
        class="m-t-10"
        :model="detailData"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 18 }"
        @finish="onFinish"
        @finish-failed="onFinishFailed"
      >
        <a-form-item
          label="事件/活动名称"
          name="name"
          :rules="{ required: true, message: '请输入事件/活动名称' }"
        >
          <a-input v-model:value="detailData.name" :maxlength="50" />
        </a-form-item>
        <a-form-item label="封面" name="cover" :rules="{ required: true, message: '请添加封面' }">
          <upload-image
            :image-str="detailData.cover"
            :component-props="{ maxCount: 1 }"
            upload="上传"
            :max-file-size-mb="4"
            @on-change-upload="(value) => (detailData.cover = value)"
          />
          <span class="text-hex-999">支持拓展名：.jpg.jpeg.png</span>
        </a-form-item>
        <a-form-item label="活动地点">
          <div class="w-full flex">
            <a-form-item
              name="address"
              class="flex-1 m-r-4"
              :rules="{ required: true, message: '请添加活动地点' }"
            >
              <a-input
                ref="addressInput"
                v-model:value="detailData.address"
                class="address_input"
                placeholder="请选择地点"
                @click="mapModalVisible = true"
              />
            </a-form-item>
            <a-form-item name="detailedAddress" class="flex-1">
              <a-input
                v-model:value="detailData.detailedAddress"
                placeholder="可输入补充内容，如：3楼101室"
              />
            </a-form-item>
          </div>
        </a-form-item>
        <a-form-item label="轮播图片" name="images">
          <upload-image
            :image-str="detailData.images"
            :component-props="{ maxCount: 5 }"
            upload="上传"
            :max-file-size-mb="4"
            @on-change-upload="(value) => (detailData.images = value)"
          />
          <span class="text-hex-999">支持拓展名：.jpg.jpeg.png</span>
        </a-form-item>
        <a-row :gutter="1">
          <a-col :span="2"> </a-col>
          <a-col :span="10">
            <!--            <div class="inline-flex items-center whitespace-nowrap">-->
            <a-form-item
              label="事件/活动类型"
              name="type"
              :rules="{ required: true, message: '请选择事件/活动类型' }"
            >
              <a-select
                v-model:value="detailData.type"
                class="min-w-150px"
                allow-clear
                :options="typeList"
                placeholder="请选择事件/活动类型"
              ></a-select>
            </a-form-item>
            <!--            </div>-->
          </a-col>
          <a-col :span="10">
            <a-form-item label="排序" name="sort" :rules="{ message: '请输入排序' }">
              <a-input v-model:value="detailData.sort" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="1">
          <a-col :span="2"> </a-col>
          <a-col :span="10">
            <a-form-item
              label="开始时间"
              name="startTime"
              :rules="{ required: true, message: '请选择开始时间' }"
            >
              <a-date-picker
                v-model:value="detailData.startTime"
                :value-format="format"
                :format="format"
                show-time
              />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item
              label="结束时间"
              name="endTime"
              :rules="{ required: true, message: '请选择结束时间' }"
            >
              <a-date-picker
                v-model:value="detailData.endTime"
                :value-format="format"
                :format="format"
                show-time
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-col :span="24">
          <a-form-item
            label="介绍"
            name="introduce"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="{ required: true, message: '请输入介绍' }"
          >
            <tinymce-editor
              v-model:value="detailData.introduce"
              placeholder="详细介绍"
            ></tinymce-editor>
          </a-form-item>
        </a-col>
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a-button class="mr-50px" type="primary" html-type="submit">发布</a-button>
            <a-button @click="closeTab">返回</a-button>
          </div>
        </a-form-item>
      </a-form>
      <map-modal
        :visible="mapModalVisible"
        :selected-location="detailData.address"
        :center="[detailData.lng, detailData.lat]"
        @ok="onOk"
        @cancel="onCancel"
      />
    </div>
  </a-card>
</template>

<script setup lang="tsx">
  import { message } from 'ant-design-vue';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { eventActivityApi, createEventActivity, updateEventActivity } from '@/api/eventActivity';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { categoryJsonByType } from '@/api/category';
  import { categoryTypeEnum } from '@/enums/categoryTypeEnum';
  import { useUserStore } from '@/store/modules/user';

  // 时间校验samoye---registrationEdit
  const format = 'YYYY-MM-DD HH:mm';
  const route = useRoute();
  const router = useRouter();
  const tabsViewStore = useTabsViewStore();
  const typeList = ref<{ id: number; name: string }[]>([]);
  const mapModalVisible = ref<boolean>(false);

  const userStore = useUserStore();
  const rustic = userStore.getRusticId();

  defineOptions({
    name: 'eventActivityEdit',
  });

  const { detailData, loading } = useRequestDetail({
    apiKey: eventActivityApi.eventActivityDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });
  const submitForm = async (params) => {
    const eventActivityId = route?.query?.id;
    const res = eventActivityId
      ? await updateEventActivity({
          ...params,
          id: eventActivityId,
          rusticId: rustic,
        })
      : await createEventActivity({
          ...params,
          rusticId: rustic,
        });
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };

  const onFinish = (values: any) => {
    submitForm(detailData.value);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const getCategoryList = async () => {
    const res = await categoryJsonByType({ type: categoryTypeEnum.ACTIVITY });
    if (res) {
      typeList.value = res.data.map((item: { name: string; id: number }) => ({
        label: item.name,
        value: item.id,
      }));
    }
  };

  const onOk = (data: any) => {
    // console.info('modalData ==>,', data);
    detailData.value = { ...detailData.value, ...data };
    detailData.value.address = data.location;
    detailData.value.lng = data.lng;
    detailData.value.lat = data.lat;
  };
  const onCancel = () => {
    mapModalVisible.value = false;
  };

  onMounted(() => {
    getCategoryList();
  });
</script>

<style></style>
